body,form,div,h1,h2,p,a,label,input{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body{
	width: 100vw;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background: url('../img/backImg.jpg') no-repeat;
	background-size: 100% 100%;	
}
form{
	width: 35%;
	padding: 20px;
	border: 1px solid black;
	height:fit-content;
	background-color: #878787;
	box-shadow:
	  12.5px 12.5px 10px rgba(0, 0, 0, 0.19),
	  100px 100px 80px rgba(0, 0, 0, 0.095);
	opacity: 0.8;
	border: none;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
form#login{
	/*display: none;*/
}
form#register{
	display: none;
}
form>*{
	display: block;
	width: 100%;
	margin: 5px 0;
}

form>img{
	margin: 0 auto;
	display: block;
	padding: 10px;
	width: 100px;
	height: 100px;
	border-radius: 100%;
}
form>label{
	font-size: 1.2rem;
	font-weight: 500;
}
form>input{
	padding: 5px;
	font-size: 1.2rem;
	border: none;
	border-radius: 100px;
}
form>input[type='button']{
	color: #CACACA;
	font-weight: bold;
	background-color: #202022;
	box-shadow:
  	3.8px 10.1px 196.8px rgba(0, 0, 0, 0.5),
  	30px 81px 299px rgba(0, 0, 0, 1);

}
form>input[type='button']:active{
	box-shadow:
    3.8px 10.1px 196.8px rgba(0, 0, 0, 0.5) inset,
    30px 81px 299px rgba(0, 0, 0, 1) inset;
}
form>p{
	text-align: right;
}
form>p>a{
	padding: 0 5px;
	font-size:1.2rem;
}
form>h2{
	margin-top:10px;
	border-top: 1px solid black;
	padding: 20px 0;
	color: #CACACA;
}


@media screen and (max-width: 1000px){
	form{
		width: 50%;
	}
}

@media screen and (max-width: 441px){
	form{
		width: 80%;
	}
}